<template>
  <div class="OtherAccount">
    <div class="operation">
      <el-popconfirm
        :title="`确认删除: \n ${currentManagersSelected.map(_m => _m.name)}?`"
        @confirm="delConfirmYes(currentManagersSelected.map(_m => _m.uid))"
        confirm-button-text="确定"
        cancel-button-text="取消"
        confirm-button-type="danger"
        cancel-button-type="primary"
      >
        <template #reference>
          <el-button
            type="danger"
            size="small"
            :disabled="currentManagersSelected.length === 0"
            >批量删除
          </el-button>
        </template>
      </el-popconfirm>
      <el-button
        type="success"
        size="small"
        :disabled="currentManager.privilege_level !== 0"
        @click="
          () => {
            handleEdidDia.show = true
            handleEdidDia.isEdit = false
          }
        "
        >新增管理员
      </el-button>
      <el-input
        placeholder="搜索用户"
        v-model="searchKeyword"
        class="handle-input"
        size="small"
      >
        <template #prefix>
          <i class="el-input__icon el-icon-search"></i>
        </template>
      </el-input>
    </div>
    <el-table
      :data="
        managerList.filter(
          data =>
            !searchKeyword ||
            data.name.toLowerCase().includes(searchKeyword.toLowerCase())
        )
      "
      :border="true"
      :row-key="row => row.uid"
      @selection-change="selections => (currentManagersSelected = selections)"
      height="calc(100vh - 130px)"
      empty-text="暂无数据"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
      />
      <el-table-column label="UID" width="100" prop="uid" align="center" />
      <el-table-column prop="name" label="用户名" width="120" align="center" />
      <el-table-column
        prop="privilege_level"
        label="权限等级"
        align="center"
        :filters="
          privilege__.map((_r, _i, _s) => ({
            text: _s[_i].role,
            value: _i,
          }))
        "
        :filter-method="(value, row) => row.privilege_level === value"
      >
        <template #default="scope">
          <el-tag
            :type="privilege__[scope.row.privilege_level].show"
            size="medium"
            >{{ privilege__[scope.row.privilege_level].role }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        :filters="
          state__.map((_r, _i, _s) => ({
            text: _s[_i].text,
            value: _i,
          }))
        "
        :filter-method="(value, row) => row.state === value"
      >
        <template #default="scope">
          <el-tag :type="state__[scope.row.state].show" size="medium"
            >{{ state__[scope.row.state].text }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="
              () => {
                handleEdit(scope.$index, scope.row)
                handleEdidDia.isEdit = true
              }
            "
            >编辑
          </el-button>
          <el-popconfirm
            title="确定删除这个管理员？"
            @confirm="delConfirmYes([scope.row.uid])"
            @cancel="currentManagersSelected = []"
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-button-type="danger"
            cancel-button-type="primary"
          >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 管理员编辑和添加界面 -->
    <el-dialog
      :title="handleEdidDia.isEdit ? '编辑管理员' : '新增管理员'"
      v-model="handleEdidDia.show"
      :append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="450px"
      @close="currentManagersSelected = []"
      @closed="
        () => {
          currentManagerSelected = { ...accountOptions }

          bindVips.list = []
        }
      "
    >
      <el-form
        :model="currentManagerSelected"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="用户名">
          <el-input
            placeholder="输入用户名"
            v-model="currentManagerSelected.name"
            clearable
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="权限等级">
          <el-select
            v-model="currentManagerSelected.privilege_level"
            placeholder="请选择权限等级"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="(role, index) in privilege__"
              :key="index"
              :label="role.role"
              :value="index"
              :disabled="index === 0"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select
            v-model="currentManagerSelected.state"
            placeholder="请选择状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="(_s, index) in state__"
              :key="index"
              :label="_s.text"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="handleEdidDia.isEdit ? '编辑密码' : '创建密码'">
          <el-input
            placeholder="请输新密码"
            v-model="currentManagerSelected.password"
            clearable
            size="small"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="绑定会员">
          <el-select
            v-model="currentManagerSelected.bind_vip.uid"
            filterable
            remote
            placeholder="输入会员名或会员号"
            size="small"
            style="width: 100%"
            :loading="bindVips.isLoading"
            loading-text="加载数据中"
            :remote-method="getBindVips"
          >
            <el-option
              v-for="item in bindVips.list"
              :key="item.uid"
              :label="item.uid"
              :value="item.uid"
            >
              <div style="float: left">
                {{ item.name }} &nbsp;
                <span style="color: #8492a6; font-size: 12px"
                  >(微信：{{ item._wx }})</span
                >
              </div>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.uid
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员验证">
          <el-input
            placeholder="输入你的管理员密码"
            v-model="currentManagerSelected.self_password"
            clearable
            size="small"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEdidDia.show = false" size="small"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="
              SAConfirmYes(handleEdidDia.isEdit ? 'set' : 'add', handleEdidDia)
            "
            size="small"
            >{{ handleEdidDia.isEdit ? '应用' : '添加' }}</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { privilege__, state__ } from '../../utils'
import { useManagerAccounts } from '../../composable/useManagerAccounts'
import { useManager } from '../../composable/useManager'
import {
  ElButton,
  ElInput,
  ElTable,
  ElTableColumn,
  ElTag,
  ElDialog,
  ElFormItem,
  ElForm,
  ElOption,
  ElSelect,
  ElPopconfirm,
} from 'element-plus'
export default defineComponent({
  components: {
    ElButton,
    ElInput,
    ElTable,
    ElTableColumn,
    ElTag,
    ElDialog,
    ElFormItem,
    ElOption,
    ElSelect,
    ElForm,
    ElPopconfirm,
  },
  setup() {
    const {
      accountOptions,
      currentManagerSelected,
      currentManagersSelected,
      bindVips,
      managerList,
      getManagersInfo,
      getBindVips,
      SAConfirmYes,
      delConfirmYes,
    } = useManagerAccounts()
    const { currentManager } = useManager()
    // 列表编辑按钮回调
    const handleEdit = (index, row) => {
      currentManagersSelected.value = [row]
      currentManagerSelected.value = JSON.parse(JSON.stringify(row))
      handleEdidDia.value.show = true
    }
    // 编辑弹窗状态与数据
    const handleEdidDia = ref({
      show: false,
      isEdit: true,
    })
    // 搜索管理员关键字
    const searchKeyword = ref('')
    onMounted(() => {
      getManagersInfo()
    })
    return {
      handleEdit,
      handleEdidDia,
      privilege__,
      state__,
      // 分割线
      currentManager,
      currentManagerSelected,
      currentManagersSelected,
      bindVips,
      getBindVips,
      managerList,
      accountOptions,
      searchKeyword,
      SAConfirmYes,
      delConfirmYes,
    }
  },
})
</script>

<style lang="scss">
$gap: 10px;
$radius: 5px;
.OtherAccount {
  padding: 10px;
  overflow: auto;

  .operation {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 50px;

    .handle-input {
      width: 200px;
      display: inline-block;
      margin-left: $gap;
    }
  }
}
</style>
